<template>
  <div class="home-container">
    <div class="home-text">首页: ...mapGetters{{ avatar }}</div>
    <div class="weixin" @click="authorization">微信授权</div>
    <div style="padding:50px;background:#253139">
      <div class="loader-1">Loading</div>
    </div>
    <form action="/login" method="get">
      <div class="login">
        <div class="usenName-content"><input type="text" name="username" placeholder="请输入用户名" />
        </div>
        <button type="submit">登录</button>
      </div>

    </form>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import axios from "@/utils/request.js";
export default {
  name: "Home",
  data() {
    return {
      nowdate: ""
    };
  },
  computed: {
    ...mapGetters(["avatar"])
  },
  methods: {
    authorization() {
      let data = {
        component_appid: "appid_value",
        authorizer_appid: "auth_appid_value",

        component_access_token: ""
      };
      // axios({
      //   url: `https://api.weixin.qq.com/cgi-bin/component/api_get_authorizer_info?component_access_token=COMPONENT_ACCESS_TOKEN`,
      //   method: "post",
      //   data
      // }).then(res=>{
      //   console.log(res);

      // }).catch(err=>{
      //   console.log(err);

      // })
      // window.open('https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx15fee6be39b992ba&redirect_uri=https://mp.weixin.qq.com/s/OHRRnJilmRxKegEQarLPsw&response_type=code&scope=scope&state=STATE#wechat_redirect ','_blank')
      window.open(
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5175026ddf41f0ed&redirect_uri=https://www.baidu.com&response_type=code&scope=snsapi_userinfo&state=type%3Dquan%2Curl%3Dhttp%3A%2F%2Fmm.dianping.com%2Fweixin%2Faccount%2Fhome",
        "_blank"
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.weixin {
  color: #1890ff;
}

@keyframes loaderHeight {
  0% {
    height: 100%;
  }

  100% {
    height: 0%;
  }
}

.loader-1 {
  font-size: 48px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #ff3d00;
  letter-spacing: 2px;
  position: relative;
}

.loader-1::after {
  content: "Loading";
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  width: 100%;
  height: 50%;
  overflow: hidden;
  animation: loaderHeight 6s linear infinite;
}
</style>
